var $imgView;
var endY;
var currentY;
var timerId;
var step;

$(window).load(function() {
	init();
	addHandler();
});

function init() {	
	$imgView = $("#image_view");
	endY = $imgView[0].scrollHeight - $imgView.height();
	step = 2;
	timerId = 0;
	currentY = 0;
}

function addHandler() {
	$("#btnStart").on("click", start);	
	$("#btnStop").on("click", stopMove);
}

function start() {
	if (timerId == 0) timerId = setInterval(startMove, 20);
}

function startMove() {
	currentY += step;
	
	if (currentY > endY) {
		currentY = endY;
		step = -2;
	}
	
	if (currentY < 0) {
		currentY = 0;
		step = 2;
	}
	
	// The vertical scroll position is the same as the number of pixels 
	// that are hidden from view above the scrollable area. If the scroll 
	// bar is at the very top, or if the element is not scrollable, this 
	// number will be 0.
	$imgView.scrollTop(currentY);
}

function stopMove() {
	if (timerId != 0) {
		clearInterval(timerId);
		timerId = 0;
	}
}